<template>
  <dl class="shop-item" @click="$router.push(`/detail/${id}`)">
      <dt>
          <img :src="cover" alt="">
      </dt>
      <dd>
          <h1>{{name}}</h1>
          <button v-if="isCar" @click.stop="addCar">加入购物车</button>
      </dd>
  </dl>
</template>

<script>
import {mapActions} from 'vuex';
export default {
    props:{
        isCar:{
            type:Boolean,
            default:false
        },
        cover:{
            type:String,
            default:''
        },
        name:{
            type:String,
            default:''
        },
        id:{
            type:Number,
            default:-1
        }
    },
    methods:{
        ...mapActions('car',['addCarAction']),
        addCar(){
            //添加购物车
            this.addCarAction(this.id)
        }
    }
}
</script>

<style lang="scss" scoped>
    .shop-item{
        width: 100%;
        padding:0 10px;
        display: flex;
        dt{
            width:100px;
            height: 100px;
            img{
                width:100%;
                height: 100%;
            }
        }
    }
</style>